<template>
  <div class="header_box">
    <div class="logo_box">
      <div class="header_img">
        <img src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinnerBar/logo-square.png" style="width: 100%; height: 100%;">
      </div>
      <div class="logoTitleBox">
        <span class="logoTitle">莆田餐巴</span>
        <span class="logoSubTitle">新零售全渠道解决方案提供商</span>
      </div>
    </div>
    <el-dropdown trigger="click" class="header_tabs_cloumn" @command="handleCommand">
      <span class="el-dropdown-link">
        <i class="el-icon-arrow-down el-icon-s-operation"></i>
      </span>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item command="index">首页</el-dropdown-item>
        <el-dropdown-item command="service">产品与服务</el-dropdown-item>
        <el-dropdown-item command="pricing">定价</el-dropdown-item>
        <el-dropdown-item command="case">案例</el-dropdown-item>
        <el-dropdown-item command="cooperation">业务合作</el-dropdown-item>
        <el-dropdown-item command="introduction">公司介绍</el-dropdown-item>
        <el-dropdown-item command="recruit">加入我们</el-dropdown-item>
        <el-dropdown-item command="contact">联系我们</el-dropdown-item>
        <el-dropdown-item command="media">媒体中心</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="header_tabs_box">
      <el-tab-pane label="首页" name="index"></el-tab-pane>
      <el-tab-pane label="产品与服务" name="service"></el-tab-pane>
      <el-tab-pane label="定价" name="pricing"></el-tab-pane>
      <el-tab-pane label="案例" name="case"></el-tab-pane>
      <el-tab-pane label="业务合作" name="cooperation"></el-tab-pane>
      <el-tab-pane label="公司介绍" name="introduction"></el-tab-pane>
      <el-tab-pane label="加入我们" name="recruit"></el-tab-pane>
      <el-tab-pane label="联系我们" name="contact"></el-tab-pane>
      <el-tab-pane label="媒体中心" name="media"></el-tab-pane>
    </el-tabs>
    <div class="header_botton">
      <span style="margin-right: 10px">登录</span>
      <el-button size="mini">免费注册</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'index'
      }
    },
    methods: {
      handleClick(data) {
        console.log(data.name)
        this.$emit('tabClick', data.name)
      },
      handleCommand(data){
        console.log(111)
        console.log(data)
        this.$emit('tabClick', data)
      }
    }
  }
</script>

<style scoped>
  .header_tabs_content{
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @media screen and (min-width: 0px) and (max-width: 300px) {
    .logo_box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .logoSubTitle {
      display: none;
    }
    .header_tabs_box {
      display: none;
    }

    .header_tabs_cloumn {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      box-sizing: border-box;
    }

    .header_img {
      width: 29px;
      height: 29px;
      margin-right: 10px
    }

    .logoTitle {
      font-size: 16px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .logoTitleBox {
      display: none;
    }
  }

  @media screen and (min-width: 301px) and (max-width: 400px) {
    .logoSubTitle {
     display: none;
    }
    .header_tabs_box {
      display: none;
    }

    .header_tabs_cloumn {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      box-sizing: border-box;
    }

    .header_img {
      width: 29px;
      height: 29px;
      margin-right: 10px
    }

    .logoTitle {
      font-size: 16px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  @media screen and (min-width: 401px) and (max-width: 870px) {
    .header_tabs_box {
      display: none;
    }

    .header_tabs_cloumn {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      box-sizing: border-box;
    }

    .header_img {
      width: 29px;
      height: 29px;
      margin-right: 10px
    }

    .logoTitle {
      font-size: 16px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .logoSubTitle {
      font-size: 7px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      transform: translate(-20%) scale(0.6);
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
  }


  @media screen and (min-width: 871px) and (max-width: 1089px) {
    .header_tabs_box {
      margin-left: 70px;
      margin-right: 70px;
      width: 40%;
    }

    /deep/ .el-tabs__header {
      margin: 0;
    }

    /deep/ .el-tabs__nav-wrap::after {
      height: 0px;
    }

    .header_tabs_cloumn {
      display: none;
    }

    .header_img {
      width: 58px;
      height: 58px;
      margin-right: 17px
    }

    .logoTitle {
      font-size: 32px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .logoSubTitle {
      font-size: 7px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      transform: translate(-20%) scale(0.6);
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
  }

  @media screen and (min-width: 1090px) and (max-width: 1200px) {
    .header_tabs_box {
      margin-left: 70px;
      margin-right: 70px;
      width: 50%;
    }

    /deep/ .el-tabs__header {
      margin: 0;
    }

    /deep/ .el-tabs__nav-wrap::after {
      height: 0px;
    }

    .header_tabs_cloumn {
      display: none;
    }

    .header_img {
      width: 58px;
      height: 58px;
      margin-right: 17px
    }

    .logoTitle {
      font-size: 32px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .logoSubTitle {
      font-size: 7px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      transform: translate(-20%) scale(0.6);
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
  }

  @media screen and (min-width: 1200px) {
    .header_tabs_box {
      margin-left: 40px;
      margin-right: 70px;
      /*width: 620px;*/
      display: flex;
      justify-content: center;
    }

    /deep/ .el-tabs__header {
      margin: 0;
    }

    /deep/ .el-tabs__nav-wrap::after {
      height: 0px;
    }

    .header_tabs_cloumn {
      display: none;
    }

    .header_img {
      width: 58px;
      height: 58px;
      margin-right: 17px
    }

    .logoTitle {
      font-size: 32px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .logoSubTitle {
      font-size: 7px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      /*transform: translate(-20%) scale(0.6);*/
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
  }

  .header_botton {
    display: flex;
    align-items: center;
  }

  .el-dropdown-link {
    cursor: pointer;
  }

  .el-icon-arrow-down {
    font-size: 20px;
    padding-left: 10px;
  }

  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>
